<!--
 * @Descripttion: ---
 * @version: v1.0.0.0
 * @Author: 任飞
 * @Date: 2020-08-28 13:42:34
 * @LastEditors: 任飞
 * @LastEditTime: 2020-07-07 15:45:01
--> 
<template>
  <div class="wrap">
    <el-form ref="form" :model="form" label-width="120px">
      <el-row :gutter="24">
        <el-col :span="5">
          <el-form-item label="商品类目" style="width: 300px">
            <el-select v-model="form.catNoL" placeholder="请选择商品类目">
              <el-option v-for="(v, i) in classify" :key="i" :label="v.catName" :value="v.catNo"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5" :offset="2">
          <el-form-item label="商品名称" style="width: 300px">
            <el-input v-model="form.itemName"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="图片上传">
            <UploadImg :imgs="EditCategoryImgs" @update-img="handleImgCategory" @del-img="handleDelImgCategory"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-for="(v, i) in specifications" :key="i" :gutter="24" >
        <el-col :span="24">
          <el-form-item :label="'规格'+(i-0+1)">
            <div class="row-content">
              <el-row :gutter="24" >
                <el-col :span="5">
                  <el-form-item label="商品型号">
                    <el-input v-model="v.stockTitle"/>
                  </el-form-item>
                </el-col>
                  <el-col :span="5">
                  <el-form-item label="成本价">
                    <el-input v-model="v.costPrice"/>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="原始售价">
                    <el-input v-model="v.salePrice"/>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="拼团价">
                    <el-input v-model="v.price"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24" style="margin-top: 22px">
               <!-- <el-col :span="7">
                  <el-form-item label="分润模式">
                     <el-select v-model="v.profitType" placeholder="请选择分润模式">
                      <el-option v-for="(v, i) in profitTypes" :key="i" :label="v.dictName" :value="v.dictNo"/>
                    </el-select>
                  </el-form-item>
                </el-col> -->
                <el-col :span="5">
                  <el-form-item label="团长佣金比例(%)" label-width="150px">
                    <el-input placeholder="团长佣金比例" v-only-number="{max:100,min:0,precision:2}" size="mini" v-model="v.scorePercent"/>
                     <template slot="append">%</template>
                  </el-form-item>
                </el-col>
                   <el-col :span="5">
                  <el-form-item label="未命中团员返佣比例(%)" label-width="150px">
                    <el-input placeholder="未命中团员返佣比例" v-only-number="{max:100,min:0,precision:2}" size="mini" v-model="v.returnRate"/>
                     <template slot="append">%</template>
                  </el-form-item>
                </el-col>
                 <el-col :span="5">
                  <el-form-item label="商品库存">
                    <el-input v-model="v.stockNum"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24" style="margin-top: 22px">
                <el-col :span="20" style="padding-left: 22px">
                  <el-form-item label="图片上传">
                    <UploadImg v-if="EditSpecificationImgs.length" :imgs="filterSku(i)" :click-index="i" img-type="sku" :multiple="false" :limit="1" @del-img="handleDelImgSpecification" @update-img="handleImgSpecification"/>
                    <UploadImg v-else :click-index="i" img-type="sku" :multiple="false" :limit="1" @del-img="handleDelImgSpecification" @update-img="handleImgSpecification"/>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
      <el-button type="primary" style="margin-bottom: 20px" @click="handleAdd">新建规格</el-button>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item label="商品详情">
            <UploadImg :imgs="EditShopdetailImgs" @update-img="handleImgShopdetail" @del-img="handleDelImgShopdetail"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-button v-if="type === 'add'" type="primary" @click="addProduct">确认新增</el-button>
    <el-button v-else type="primary" @click="updateProduct">确认修改</el-button>
  </div>
</template>
<script>
import UploadImg from "./components/upload"
export default {
  components: {
    UploadImg
  },
  data() {
    return {
      form: {
        catNoL: "",
        itemName: ""
      },
      classify: [],
      profitTypes:[],
      specifications: [
        // {
        //   price: "",
        //   costPrice: "",
        //   narrowPicNo: "",
        //   picNo: "",
        //   stockTitle: "",
        //   stockNum: "",
        //   profitType: "",
        //   scorePercent: ""
        // }
      ], //规格
      CategoryImgs: [], // 商品类目照片
      SpecificationImgs: [], // 商品规格照片
      ShopdetailImgs: [], // 商品详情照片
      EditCategoryImgs: [], // Edit商品类目照片
      EditSpecificationImgs: [], // Edit商品规格照片
      EditShopdetailImgs: [], // Edit商品详情照片
      // 要请求的参数
      catNol: "",
      itemPicDetailVos: [],
      itemPicTopVos: [],
      itemSkuCreateVos: [],
      itemTitle: "",
      itemNo: "",
      shopNo: "",
      type: "add"
    }
  },
  computed: {},
  watch: {},
  created() {
    this.type = this.$route.query.type === 'edit' ? 'edit' : 'add'
  },
  mounted() {
    if (this.$route.query.type === 'edit') {
      this.type = "edit"
      this.$api.fenxiao.product.findGoodsByItemNo(this.$route.query.itemNo)
        .then(res => {
          this.form = {
            catNoL: res.data.catNo1,
            itemName: res.data.itemTitle
          }
          this.EditCategoryImgs = this.filterArr(res.data.itemPicTopResultDtoList) // 展示所需
          this.EditSpecificationImgs = this.filterArr(res.data.itemSkuResultDtos) // 展示所需
          this.EditShopdetailImgs = this.filterArr(res.data.itemPicDetailResultDtoList) // 展示所需
          this.CategoryImgs = this.filterUploadArr(res.data.itemPicTopResultDtoList), // 上传所需的商品类目照片
          this.SpecificationImgs = this.filterUploadArr(res.data.itemSkuResultDtos), // 上传所需的商品规格照片
          this.ShopdetailImgs = this.filterUploadArr(res.data.itemPicDetailResultDtoList), // 上传所需的商品详情照片
          this.specifications = res.data.itemSkuResultDtos
          this.itemNo = res.data.itemNo
        })
        .catch()
    }
    this.getShopClassify();
    this.getProfitTypes();
  },
  methods: {
    filterSku(i) {
      let arr = []
      if (this.EditSpecificationImgs[i].picUrl) {
        arr.push(this.EditSpecificationImgs[i])
      }
      return arr
    },
    filterArr(paramArr) {
      const arr = paramArr.map(v => {
        return Object.assign({ url: v.picUrl }, v)
      })
      return arr
    },
    filterUploadArr(paramArr) {
      if (!paramArr.length) {
        return []
      } else {
        const arr = paramArr.map(v => {
          return {
            id: v.id,
            narrowPicNo: v.narrowPicNo,
            picNo: v.picNo
          }
        })
        return arr
      }
    },
    handleAdd() {
      const arr = this.specifications
      arr.push({
        model: "",
        price: "",
        inventory: "",
        pictures: []
      })
      this.specifications = arr
    },
    // 获取商品分类
    getShopClassify() {
      this.$api.fenxiao.product.classify("S0001")
        .then(res => {
          this.classify = res.data
        })
        .catch()
    },
     //获取分润模式
    getProfitTypes() {
      this.$api.fenxiao.company.types("PROFIT_TYPE").then(res => {
        this.profitTypes = res.data
      }).catch()
    },
    // 上传商品类目照片
    handleImgCategory(imgs) {
      const arr = []
      imgs.forEach(element => {
        arr.push({
          narrowPicNo: element.narrowFileNo,
          picNo: element.fileNo
        })
      })
      this.CategoryImgs = this.CategoryImgs.concat(arr)
    },
    // 删除商品类目照片
    handleDelImgCategory(obj) {
      this.CategoryImgs = obj.imgs
    },
    // 上传商品规格照片(一个规格只能上传一张)
    handleImgSpecification(obj) {
      const specArr = this.specifications
      specArr[obj.index]['narrowPicNo'] = obj.narrowFileNo
      specArr[obj.index]['picNo'] = obj.fileNo
      this.specifications = specArr
    },
    // 删除商品规格照片
    handleDelImgSpecification(obj) {
      // this.specifications = imgs
      this.SpecificationImgs = obj.imgs
      let arr = this.specifications
      arr.forEach((v, i) => {
        if (i === obj.index) {
          v.narrowPicNo = ""
          v.picNo = ""
          v.narrowPicUrl = ""
          v.picUrl = ""
        }
      })
      this.specifications = arr
    },
    // 上传商品详情照片
    handleImgShopdetail(imgs) {
      const arr = []
      imgs.forEach(element => {
        arr.push({
          narrowPicNo: element.narrowFileNo,
          picNo: element.fileNo
        })
      })
      this.ShopdetailImgs = this.ShopdetailImgs.concat(arr)
    },
    // 删除商品详情照片
    handleDelImgShopdetail(obj) {
      debugger
      this.ShopdetailImgs = obj.imgs
    },
    // 新增商品
    addProduct() {
      // const skuarr = this.specifications
      // skuarr.forEach(v => {
      //   v.costPrice = v.cost
      // })
      const obj = {
        catNo1: this.form.catNoL,
        itemPicDetailVos: this.ShopdetailImgs,
        itemPicTopVos: this.CategoryImgs,
        itemSkuCreateVos: this.specifications,
        itemTitle: this.form.itemName,
        shopNo: "S0001"
      }
      this.$api.fenxiao.product.add({ data: obj })
        .then(res => {
          this.$notify({ title: '新增成功', type: 'success', duration: 2500 })
          this.$router.go(-1)
        })
        .catch()
    },
    // 修改商品
    updateProduct() {
       const skuarr = this.specifications
      skuarr.forEach(v => {
        v.profitType = v.profitType
      })
      const obj = {
        catNo1: this.form.catNoL,
        itemNo: this.itemNo,
        itemPicDetailVos: this.ShopdetailImgs,
        itemPicTopVos: this.CategoryImgs,
        itemSkuModiVos: this.specifications,
        itemTitle: this.form.itemName,
        shopNo: "S0001",
      }
      this.$api.fenxiao.product.update({ data: obj })
        .then(res => {
          this.$notify({ title: '修改成功', type: 'success', duration: 2500 })
          this.$router.go(-1)
        })
        .catch()
    }
  }
}
</script>
<style lang='less' scoped>
.wrap {
  padding-left: 30px;
  padding-top: 50px;
}
.row-content{
  border: 1px solid #cccc;
  padding: 20px 0;
}
</style>